<template>
  <BasicModal v-bind="$attrs" destroyOnClose title="退卡工单详情" :width="modalWidth" :footer="null" @register="registerModal">
    <Description size="middle" class="mt-4" title="基础信息" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="backcardDetailInfo.data" :schema="commonInfoSchema" />
    <Description size="middle" class="mt-4" title="退卡专员" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="backcardDetailInfo.data" :schema="tuikaInfoSchema" />
    <Description size="middle" class="mt-4" title="退款专员" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="backcardDetailInfo.data" :schema="tuikuanInfoSchema" />
    <Description size="middle" class="mt-4" title="其他信息" :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }" :data="backcardDetailInfo.data" :schema="otherInfoSchema" />
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@apps/antd-admin/src/components/modal';
import { DescItem, Description } from '@apps/antd-admin/src/components/description';
import { getBackcardRecordDetail } from '../data/api';
import { render } from '@apps/antd-admin/src/hooks/render/renderUtils';
import { useAppInject } from '@apps/antd-admin/src/hooks/web/use-app-inject';

const { getIsMobile } = useAppInject();
const modalWidth = ref('900px');
if (unref(getIsMobile)) {
  modalWidth.value = '80%';
}

let backcardDetailInfo: Recordable = reactive({ data: {} });
const commonInfoSchema: DescItem[] = [
  {
    field: 'isCheck',
    label: '当前状态',
    span: 3,
    render: (curVal, data) => {
      let isCheckArray = [
        { label: '现办现退', value: 0 },
        { label: '已提交', value: 1 },
        { label: '取消提交', value: 2 },
        { label: '退卡专员审核中', value: 3 },
        { label: '退卡专员取消退卡', value: 4 },
        { label: '退款专员审核中', value: 6 },
        { label: '退款专员取消退卡', value: 7 },
        { label: '退款专员取消退卡', value: 8 },
        { label: '退款专员已退款', value: 9 },
        { label: '退款专员已补退', value: 10 },
        { label: '退款专员已退卡未退款', value: 11 },
      ];
      const isCheck: any = isCheckArray.find(item => item.value == curVal);
      if (isCheck) {
        return isCheck.label;
      }
      return '';
    },
  },
  {
    field: 'userName',
    label: '会员姓名',
    span: 3,
  },
  {
    field: 'mobile',
    label: '手机号',
    span: 3,
  },
  {
    field: 'vipCardNo',
    label: '退卡卡号',
    span: 3,
  },
  {
    field: 'buyDate',
    label: '开卡日期',
    span: 3,
  },
  {
    field: 'payAmount',
    label: '支付金额',
    span: 3,
  },
  {
    field: 'goodsName',
    label: '卡种名称',
    span: 3,
  },
  {
    field: 'openAirportName',
    label: '开卡地区',
    span: 3,
  },
  {
    field: 'remark',
    label: '备注说明',
    span: 10,
  },
  {
    field: 'refundReason',
    label: '退卡原因',
    span: 10,
  },
  {
    field: 'dianTuiImg',
    label: '垫付凭证',
    span: 3,
    render: (curVal, data) => {
      return render.renderImage({ text: curVal });
    },
  },
];

const tuikaInfoSchema: DescItem[] = [
  {
    field: 'bearWay',
    label: '承担方式',
    span: 3,
    render: (curVal, data) => {
      let bearWayArray = [
        { label: '会员同意全部承担', value: 1 },
        { label: '会员不同意全部承担', value: 2 },
      ];
      const bearWay: any = bearWayArray.find(item => item.value == curVal);
      if (bearWay) {
        return bearWay.label;
      }
      return '';
    },
  },
  {
    field: 'vipBearAmount',
    label: '会员承担金额',
    span: 3,
  },
  {
    field: 'saleBearAmount',
    label: '销售承担金额',
    span: 3,
    show: data => {
      if (data.bearWay == 2) {
        return true;
      } else {
        return false;
      }
    },
  },
  {
    field: 'refundAmount',
    label: '退卡金额',
    span: 3,
  },
  {
    field: 'bank',
    label: '开户银行',
    span: 3,
  },
  {
    field: 'bankNo',
    label: '银行卡号',
    span: 3,
  },
  {
    field: 'remarka',
    label: '退卡专员备注',
    span: 10,
  },
  {
    field: 'remarkc',
    label: '贵宾厅使用明细扣费说明',
    span: 10,
  },
  {
    field: 'remarkd',
    label: '电子金使用明细扣费说明',
    span: 10,
  },
];

const tuikuanInfoSchema: DescItem[] = [
  {
    field: 'refundWay',
    label: '退款方式',
    span: 3,
    render: (curVal, data) => {
      let refundWayArray = [
        { label: '银行', value: 'refund_bank' },
        { label: '微信', value: 'refund_wx' },
        { label: '支付宝', value: 'refund_ali' },
        { label: '其他·', value: 'refund_order' },
      ];
      const refundWay: any = refundWayArray.find(item => item.value == curVal);
      if (refundWay) {
        return refundWay.label;
      }
      return '';
    },
  },
  {
    field: 'refundDate',
    label: '退款时间',
    span: 3,
  },
  {
    field: 'refundImg',
    label: '退款凭证',
    span: 3,
    render: (curVal, data) => {
      return render.renderImage({ text: curVal });
    },
  },
  {
    field: 'remarkb',
    label: '退款专员备注',
    span: 10,
  },
];

const otherInfoSchema: DescItem[] = [
  {
    field: 'addRefundWay',
    label: '补退方式',
    span: 3,
    render: (curVal, data) => {
      let refundWayArray = [
        { label: '银行', value: 'refund_bank' },
        { label: '微信', value: 'refund_wx' },
        { label: '支付宝', value: 'refund_ali' },
        { label: '其他·', value: 'refund_order' },
      ];
      const refundWay: any = refundWayArray.find(item => item.value == curVal);
      if (refundWay) {
        return refundWay.label;
      }
      return '';
    },
  },
  {
    field: 'addRefundAmount',
    label: '补退金额',
    span: 3,
  },
  {
    field: 'addRefundRemark',
    label: '补退备注',
    span: 10,
  },
  {
    field: 'tagRemark',
    label: '退卡未退款备注',
    span: 10,
  },
];

const [registerModal, { setModalProps }] = useModalInner(async data => {
  let record = data.record;
  getBackcardRecordDetail({
    backcardRecordId: record.backcardRecordId,
    handlerName: 'busBackcardDetailHandler',
  }).then(result => {
    console.info(result);
    backcardDetailInfo.data = result;
  });
});
</script>
